import { View, Text, Image, ScrollView } from '@tarojs/components'
import { useLoad, useRouter, navigateTo } from '@tarojs/taro'
import { API_BASE_URL } from '../../../../config/env'
import SimpleImage from '../../../components/common/SimpleImage'
import './category.scss'

// 分类数据
const categoryData = {
  '皮肤管理': {
    title: '皮肤管理',
    icon: '🔬',
    description: '专业皮肤护理，改善肤质问题',
    products: [
      {
        id: 101,
        title: '【皮肤管理】深层清洁+补水保湿套餐',
        price: 299,
        originalPrice: 399,
        saved: 100,
        hospital: '南昌韩美美容医院',
        rating: 4.8,
        tags: ['深层清洁', '补水保湿'],
        image: 'https://picsum.photos/300/200?random=101'
      },
      {
        id: 102,
        title: '【皮肤管理】祛痘祛印+收缩毛孔',
        price: 199,
        originalPrice: 299,
        saved: 100,
        hospital: '北京焕星医疗美容',
        rating: 4.6,
        tags: ['祛痘祛印', '收缩毛孔'],
        image: 'https://picsum.photos/300/200?random=102'
      },
      {
        id: 103,
        title: '【皮肤管理】美白嫩肤+提亮肤色',
        price: 399,
        originalPrice: 499,
        saved: 100,
        hospital: '杭州连天美医疗美容医院',
        rating: 4.9,
        tags: ['美白嫩肤', '提亮肤色'],
        image: 'https://picsum.photos/300/200?random=103'
      }
    ]
  },
  '除皱抗衰': {
    title: '除皱抗衰',
    icon: '⚡',
    description: '专业抗衰老，恢复年轻态',
    products: [
      {
        id: 201,
        title: '【除皱抗衰】玻尿酸填充+肉毒素除皱',
        price: 2999,
        originalPrice: 3999,
        saved: 1000,
        hospital: '南昌韩美美容医院',
        rating: 4.8,
        tags: ['玻尿酸填充', '肉毒素除皱'],
        image: 'https://picsum.photos/300/200?random=201'
      },
      {
        id: 202,
        title: '【除皱抗衰】超声刀+热玛吉',
        price: 5999,
        originalPrice: 6999,
        saved: 1000,
        hospital: '北京焕星医疗美容',
        rating: 4.7,
        tags: ['超声刀', '热玛吉'],
        image: 'https://picsum.photos/300/200?random=202'
      }
    ]
  },
  '瘦脸轮廓': {
    title: '瘦脸轮廓',
    icon: '💎',
    description: '精致轮廓，完美脸型',
    products: [
      {
        id: 301,
        title: '【瘦脸轮廓】瘦脸针+轮廓塑形',
        price: 1999,
        originalPrice: 2999,
        saved: 1000,
        hospital: '南昌韩美美容医院',
        rating: 4.8,
        tags: ['瘦脸针', '轮廓塑形'],
        image: 'https://picsum.photos/300/200?random=301'
      },
      {
        id: 302,
        title: '【瘦脸轮廓】下颌角整形+颧骨内推',
        price: 15999,
        originalPrice: 19999,
        saved: 4000,
        hospital: '北京焕星医疗美容',
        rating: 4.9,
        tags: ['下颌角整形', '颧骨内推'],
        image: 'https://picsum.photos/300/200?random=302'
      }
    ]
  },
  '鼻部': {
    title: '鼻部',
    icon: '👃',
    description: '精致鼻型，立体五官',
    products: [
      {
        id: 401,
        title: '【鼻部】玻尿酸隆鼻+鼻尖塑形',
        price: 2999,
        originalPrice: 3999,
        saved: 1000,
        hospital: '南昌韩美美容医院',
        rating: 4.8,
        tags: ['玻尿酸隆鼻', '鼻尖塑形'],
        image: 'https://picsum.photos/300/200?random=401'
      },
      {
        id: 402,
        title: '【鼻部】综合隆鼻+鼻翼缩小',
        price: 19999,
        originalPrice: 24999,
        saved: 5000,
        hospital: '北京焕星医疗美容',
        rating: 4.9,
        tags: ['综合隆鼻', '鼻翼缩小'],
        image: 'https://picsum.photos/300/200?random=402'
      }
    ]
  },
  '美体塑形': {
    title: '美体塑形',
    icon: '🏃',
    description: '完美身材，自信人生',
    products: [
      {
        id: 501,
        title: '【美体塑形】吸脂塑形+紧致提升',
        price: 9999,
        originalPrice: 12999,
        saved: 3000,
        hospital: '南昌韩美美容医院',
        rating: 4.7,
        tags: ['吸脂塑形', '紧致提升'],
        image: 'https://picsum.photos/300/200?random=501'
      },
      {
        id: 502,
        title: '【美体塑形】溶脂针+射频紧肤',
        price: 3999,
        originalPrice: 4999,
        saved: 1000,
        hospital: '北京焕星医疗美容',
        rating: 4.6,
        tags: ['溶脂针', '射频紧肤'],
        image: 'https://picsum.photos/300/200?random=502'
      }
    ]
  },
  '玻尿酸': {
    title: '玻尿酸',
    icon: '💉',
    description: '安全填充，自然塑形',
    products: [
      {
        id: 601,
        title: '【玻尿酸】面部填充+轮廓塑形',
        price: 3999,
        originalPrice: 4999,
        saved: 1000,
        hospital: '南昌韩美美容医院',
        rating: 4.8,
        tags: ['面部填充', '轮廓塑形'],
        image: 'https://picsum.photos/300/200?random=601'
      },
      {
        id: 602,
        title: '【玻尿酸】唇部塑形+下巴填充',
        price: 2999,
        originalPrice: 3999,
        saved: 1000,
        hospital: '北京焕星医疗美容',
        rating: 4.7,
        tags: ['唇部塑形', '下巴填充'],
        image: 'https://picsum.photos/300/200?random=602'
      }
    ]
  },
  '眼部': {
    title: '眼部',
    icon: '👁️',
    description: '明亮双眸，魅力无限',
    products: [
      {
        id: 701,
        title: '【眼部】双眼皮+开眼角',
        price: 5999,
        originalPrice: 7999,
        saved: 2000,
        hospital: '南昌韩美美容医院',
        rating: 4.8,
        tags: ['双眼皮', '开眼角'],
        image: 'https://picsum.photos/300/200?random=701'
      },
      {
        id: 702,
        title: '【眼部】祛眼袋+泪沟填充',
        price: 3999,
        originalPrice: 4999,
        saved: 1000,
        hospital: '北京焕星医疗美容',
        rating: 4.7,
        tags: ['祛眼袋', '泪沟填充'],
        image: 'https://picsum.photos/300/200?random=702'
      }
    ]
  },
  '激光脱毛': {
    title: '激光脱毛',
    icon: '✨',
    description: '永久脱毛，光滑肌肤',
    products: [
      {
        id: 801,
        title: '【激光脱毛】全身脱毛+腋下脱毛',
        price: 1999,
        originalPrice: 2999,
        saved: 1000,
        hospital: '南昌韩美美容医院',
        rating: 4.8,
        tags: ['全身脱毛', '腋下脱毛'],
        image: 'https://picsum.photos/300/200?random=801'
      },
      {
        id: 802,
        title: '【激光脱毛】比基尼脱毛+唇部脱毛',
        price: 999,
        originalPrice: 1499,
        saved: 500,
        hospital: '北京焕星医疗美容',
        rating: 4.6,
        tags: ['比基尼脱毛', '唇部脱毛'],
        image: 'https://picsum.photos/300/200?random=802'
      }
    ]
  },
  '嗨buy指南': {
    title: '嗨buy指南',
    icon: '📋',
    description: '购物指南，优惠攻略',
    products: [
      {
        id: 901,
        title: '【嗨buy指南】新人专享优惠套餐',
        price: 99,
        originalPrice: 199,
        saved: 100,
        hospital: '南昌韩美美容医院',
        rating: 4.9,
        tags: ['新人专享', '优惠套餐'],
        image: 'https://picsum.photos/300/200?random=901'
      },
      {
        id: 902,
        title: '【嗨buy指南】限时抢购特价商品',
        price: 199,
        originalPrice: 399,
        saved: 200,
        hospital: '北京焕星医疗美容',
        rating: 4.8,
        tags: ['限时抢购', '特价商品'],
        image: 'https://picsum.photos/300/200?random=902'
      }
    ]
  },
  '水光嗨购': {
    title: '水光嗨购',
    icon: '💧',
    description: '水光针系列，补水保湿',
    products: [
      {
        id: 1001,
        title: '【水光嗨购】水光针+玻尿酸补水',
        price: 999,
        originalPrice: 1499,
        saved: 500,
        hospital: '南昌韩美美容医院',
        rating: 4.8,
        tags: ['水光针', '玻尿酸补水'],
        image: 'https://picsum.photos/300/200?random=1001'
      },
      {
        id: 1002,
        title: '【水光嗨购】美白水光+维C导入',
        price: 1299,
        originalPrice: 1799,
        saved: 500,
        hospital: '北京焕星医疗美容',
        rating: 4.7,
        tags: ['美白水光', '维C导入'],
        image: 'https://picsum.photos/300/200?random=1002'
      }
    ]
  }
}

export default function Category() {
  const router = useRouter()
  const { category } = router.params
  
  useLoad(() => {
    console.log('分类页面加载', { category })
  })

  const categoryInfo = categoryData[category] || categoryData['皮肤管理']

  // 处理图片URL，将相对路径转换为完整URL
  const getFullImageUrl = (imageUrl) => {
    console.log('📦 分类页面原始图片URL:', imageUrl)
    console.log('🌐 API_BASE_URL:', API_BASE_URL)
    
    if (!imageUrl) {
      console.log('❌ 分类页面图片URL为空，使用备用图片')
      return 'https://images.unsplash.com/photo-1559757148-5c350d0d3c56?w=300&h=200&fit=crop'
    }
    
    // 处理完整URL，包括localhost替换
    if (imageUrl.startsWith('http')) {
      // 检查是否包含localhost，如果是则替换为API_BASE_URL
      if (imageUrl.includes('localhost') || imageUrl.includes('127.0.0.1')) {
        const path = imageUrl.replace(/^https?:\/\/[^\/]+/, '')
        const newUrl = `${API_BASE_URL}${path}`
        console.log('🔄 分类页面检测到localhost，替换为API_BASE_URL:', newUrl)
        return newUrl
      }
      console.log('✅ 分类页面检测到完整URL，直接使用:', imageUrl)
      return imageUrl
    }
    
    const fullUrl = imageUrl.startsWith('/') 
      ? `${API_BASE_URL}${imageUrl}`
      : `${API_BASE_URL}/${imageUrl}`
    
    console.log('🔗 分类页面拼接后的完整URL:', fullUrl)
    return fullUrl
  }

  // 跳转到商品详情
  const goToProductDetail = (product) => {
    navigateTo({
      url: `/packageB/pages/product-detail/product-detail?id=${product.id}&title=${encodeURIComponent(product.title)}`
    })
  }

  return (
    <View className='category'>
      {/* 页面头部 */}
      <View className='category-header'>
        <View className='category-info'>
          <View className='category-icon'>{categoryInfo.icon}</View>
          <View className='category-text'>
            <Text className='category-title'>{categoryInfo.title}</Text>
            <Text className='category-desc'>{categoryInfo.description}</Text>
          </View>
        </View>
      </View>

      {/* 商品列表 */}
      <ScrollView className='product-list' scrollY>
        <View className='product-grid'>
          {categoryInfo.products.map((product) => (
            <View key={product.id} className='product-card' onClick={() => goToProductDetail(product)}>
              {/* 商品标签 */}
              <View className='product-tags'>
                {product.tags.map((tag, index) => (
                  <View key={index} className='product-tag'>
                    <Text>{tag}</Text>
                  </View>
                ))}
              </View>
              
              {/* 商品图片 */}
              <SimpleImage 
                src={product.image} 
                className='product-image' 
                mode='aspectFill'
                showLoadingSpinner={true}
              />
              
              {/* 商品信息 */}
              <View className='product-info'>
                <Text className='product-title'>{product.title}</Text>
                <View className='product-price'>
                  <Text className='current-price'>¥{product.price}</Text>
                  <Text className='original-price'>¥{product.originalPrice}</Text>
                  <Text className='saved-price'>已省¥{product.saved}</Text>
                </View>
                <View className='product-footer'>
                  <Text className='hospital-name'>{product.hospital}</Text>
                  <Text className='rating'>⭐ {product.rating}</Text>
                </View>
              </View>
            </View>
          ))}
        </View>
      </ScrollView>
    </View>
  )
}
